<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'

const list = ref(
  [
    { id: 1, brandType: '电子产品', brand: 'Sony', specification: '32GB', modelType: 'X123', vendor: '供应商A', costPrice: '1500', salePrice: '1800', memo: '无', lastUpdateTime: '2024-09-01', action: '编辑' },
    { id: 2, brandType: '家用电器', brand: 'LG', specification: '8KG', modelType: 'W456', vendor: '供应商B', costPrice: '2500', salePrice: '3000', memo: '新品', lastUpdateTime: '2024-09-02', action: '编辑' },
    { id: 3, brandType: '办公用品', brand: 'Canon', specification: '500页', modelType: 'P789', vendor: '供应商C', costPrice: '800', salePrice: '1000', memo: '热销', lastUpdateTime: '2024-09-03', action: '编辑' },
    { id: 4, brandType: '家具', brand: 'IKEA', specification: '3人沙发', modelType: 'S101', vendor: '供应商D', costPrice: '1200', salePrice: '1500', memo: '促销中', lastUpdateTime: '2024-09-04', action: '编辑' },
    { id: 5, brandType: '汽车配件', brand: 'Bosch', specification: '刹车片', modelType: 'B202', vendor: '供应商E', costPrice: '300', salePrice: '400', memo: '库存紧张', lastUpdateTime: '2024-09-05', action: '编辑' },
    { id: 6, brandType: '运动器材', brand: 'Nike', specification: '运动鞋', modelType: 'N303', vendor: '供应商F', costPrice: '600', salePrice: '750', memo: '折扣中', lastUpdateTime: '2024-09-06', action: '编辑' },
    { id: 7, brandType: '食品', brand: '百事可乐', specification: '355ml', modelType: 'P404', vendor: '供应商G', costPrice: '2', salePrice: '3', memo: '热销', lastUpdateTime: '2024-09-07', action: '编辑' },
    { id: 8, brandType: '化妆品', brand: 'L’Oréal', specification: '护肤霜', modelType: 'L505', vendor: '供应商H', costPrice: '180', salePrice: '220', memo: '新品上市', lastUpdateTime: '2024-09-08', action: '编辑' },
    { id: 9, brandType: '玩具', brand: '乐高', specification: '积木套装', modelType: 'L606', vendor: '供应商I', costPrice: '350', salePrice: '450', memo: '节日促销', lastUpdateTime: '2024-09-09', action: '编辑' },
    { id: 10, brandType: '书籍', brand: '人民文学', specification: '小说', modelType: 'B707', vendor: '供应商J', costPrice: '50', salePrice: '65', memo: '畅销书', lastUpdateTime: '2024-09-10', action: '编辑' },
    { id: 11, brandType: '医疗器械', brand: '飞利浦', specification: '血压计', modelType: 'M808', vendor: '供应商K', costPrice: '500', salePrice: '650', memo: '紧急补货', lastUpdateTime: '2024-09-11', action: '编辑' },
    { id: 12, brandType: '厨具', brand: 'Tefal', specification: '炒锅', modelType: 'C909', vendor: '供应商L', costPrice: '250', salePrice: '300', memo: '促销活动', lastUpdateTime: '2024-09-12', action: '编辑' },
    { id: 13, brandType: '手机配件', brand: 'Apple', specification: '充电器', modelType: 'A1010', vendor: '供应商M', costPrice: '80', salePrice: '100', memo: '新品', lastUpdateTime: '2024-09-13', action: '编辑' },
    { id: 14, brandType: '饰品', brand: 'Tiffany', specification: '项链', modelType: 'T1212', vendor: '供应商N', costPrice: '2000', salePrice: '2500', memo: '限量版', lastUpdateTime: '2024-09-14', action: '编辑' },
    { id: 15, brandType: '电脑配件', brand: 'Corsair', specification: '内存条', modelType: 'C1313', vendor: '供应商O', costPrice: '400', salePrice: '500', memo: '热销中', lastUpdateTime: '2024-09-15', action: '编辑' },
    { id: 16, brandType: '家居用品', brand: 'Muji', specification: '收纳盒', modelType: 'M1414', vendor: '供应商P', costPrice: '60', salePrice: '80', memo: '清仓', lastUpdateTime: '2024-09-16', action: '编辑' },
    { id: 17, brandType: '音响设备', brand: 'Bose', specification: '无线耳机', modelType: 'B1515', vendor: '供应商Q', costPrice: '1200', salePrice: '1500', memo: '最新款', lastUpdateTime: '2024-09-17', action: '编辑' },
    { id: 18, brandType: '园艺工具', brand: 'Fiskars', specification: '剪枝剪', modelType: 'F1616', vendor: '供应商R', costPrice: '150', salePrice: '190', memo: '季节性促销', lastUpdateTime: '2024-09-18', action: '编辑' }
  ]
)
const fApi = ref(null);
const rule = ref([
  {
    "type": "select",
    "field": "brandType",
    "title": "品类",
    "$required": true,
    "props": {
      "filterable": true
    },
    //默认span == 24
    col: {
      span: 12
    },
    "options": [
      {
        "label": "选项01",
        "value": "1"
      },
      {
        "label": "选项02",
        "value": "2"
      },
      {
        "label": "选项03",
        "value": "3"
      }
    ],
    control: [],
    //表示联动效果
    /**
     *  {
                value: 'admin',
                // 这里联动效果表示选择value=admin时，显示下面的input表单
                rule: [
                    { type: 'input', field: 'admin_code', title: '管理员验证码' }
                ]
            }
     */


    "display": true,
    "style": {
      "display": "block"
    }
  },
  {
    "type": "select",
    "field": "brand",
    "title": "品名/品牌",
    "$required": true,
    col: {
      span: 12
    },
    "options": [
      {
        "label": "选项01",
        "value": "1"
      },
      {
        "label": "选项02",
        "value": "2"
      },
      {
        "label": "选项03",
        "value": "3"
      }
    ],
    "display": true,
  },
  {
    "type": "input",
    col: {
      span: 12
    },
    "field": "F4mxm0z4wjvfbec",
    "title": "规格",
    "$required": true,
    "display": true,
    "hidden": false,
  },
  {
    "type": "input",
    col: {
      span: 12
    },
    "field": "F0ivm0z4wkuhbhc",
    "title": "型号",
    "$required": true,
    "display": true,
  },
  {
    "type": "select",
    "field": "Fsvmm0z4wp8fbkc",
    "title": "供应商",
    "$required": true,
    "options": [
      {
        "label": "选项01",
        "value": "1"
      },
      {
        "label": "选项02",
        "value": "2"
      },
      {
        "label": "选项03",
        "value": "3"
      }
    ],
    "display": true,
  },
  {
    "type": "input",
    col: {
      span: 6
    },
    "field": "Fi7xm0z4wzbbbnc",
    "title": "成本价格(含税)",
    "$required": true,
    "display": true,
  },
  {
    "type": "input",
    col: {
      span: 6
    },
    title: "-",
    "field": "Fwvwm0z4x45dbqc",
    "$required": true,
    "display": true,
    "wrap": {
      "labelWidth": "25px"
    }
  },
  {
    "type": "input",
    col: {
      span: 6
    },
    "field": "salePrice",
    "title": "建议价格(含税)",
    "$required": true,
    "display": true,
  },
  {
    "type": "input",
    col: {
      span: 6
    },
    "field": "Fqfam0z4xebmbwc",
    "title": "-",
    "wrap": {
      "labelWidth": "25px"
    },
    "$required": true,
    "display": true,
  },
  {
    "type": "input",
    "field": "memo",
    "title": "备注",
    "$required": true,
    "props": {
      "type": "textarea"
    },
    "display": true,
  },
])

//表单的一些事件选项
const options = ref({
  submitBtn: false,
  // submitBtn: {
  //   innerText: '自定义按钮',
  //   type: 'primary',
  //   danger: true,
  //   click(api) {
  //     alert('点击了提交按钮')
  //     //提交表单
  //     //api.submit()
  //   },
  // },
  // resetBtn: {
  //   show: true,
  //   click(api) {
  //     alert('点击了重置按钮')
  //     //重置表单
  //     //api.resetFields()
  //   },
  // },
  onSubmit: (formData) => {
    alert(JSON.stringify(formData))
  }
})
let dialogVisible = ref(false)
let total = ref(18)
const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  name: null,
  status: [] as any,
  date: null as any,
  queryState: null,
  description: null,
  createTime: [],
})


//methods

const getList = () => { }
const handleQuery = () => { }
const addProduct = () => {
  dialogVisible.value = true
}
const sureAddProduct = () => { }
const handleCancel = () => {
  dialogVisible.value = false
}

onMounted(() => {
})
</script>

<template>
  <div class="sManage w-full">
    <div class="app-container w-full ">

      <el-card>
        <template #header>
          <div class="card-header">
            <div class="headerWrap flex flex-row  items-center justify-between">
              <div class="titleBar flex flex-row items-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24">
                  <path fill="#ccc"
                    d="M4.808 9.616q-.343 0-.576-.233T4 8.808V6.923q0-.343.232-.575t.576-.232h1.884q.343 0 .576.232t.232.575v1.885q0 .343-.232.575t-.576.233zm4.077 0q-.344 0-.576-.233q-.232-.232-.232-.575V6.923q0-.343.232-.575t.575-.232h10.308q.344 0 .576.232t.232.575v1.885q0 .343-.232.575t-.576.233zm0 3.923q-.344 0-.576-.233q-.232-.232-.232-.575V11q0-.343.232-.575q.232-.233.576-.233h10.307q.344 0 .576.232T20 11v1.73q0 .344-.232.576t-.576.233zm0 4.077q-.344 0-.576-.233q-.232-.232-.232-.575v-1.885q0-.343.232-.576t.575-.232h10.308q.344 0 .576.232q.232.233.232.576v1.885q0 .343-.232.575t-.576.233zm-4.077 0q-.344 0-.576-.233T4 16.808v-1.885q0-.343.232-.576t.576-.232h1.884q.343 0 .576.232q.232.233.232.576v1.885q0 .343-.232.575t-.576.233zm0-4.077q-.344 0-.576-.233T4 12.731V11q0-.343.232-.575t.576-.233h1.884q.343 0 .576.232T7.5 11v1.73q0 .344-.232.576t-.576.233z" />
                </svg>
                <span class="text-16px">标品档案列表</span>
              </div>
              <!-- 搜索工作栏 -->
              <el-form :model="queryParams" class="flex flex-row items-center  px-6 mt-2 -mb-2  " ref="queryForm"
                :inline="true" label-width="78px">
                <el-form-item>
                  <el-button type="primary" @click="addProduct">新增标品</el-button>
                </el-form-item>
                <el-form-item label="" prop="queryState">
                  <el-input v-model="queryParams.queryState" size="default" style="width: 274px"
                    placeholder="请输入您想要搜索的信息" clearable @keyup.enter="handleQuery">
                    <template #append>
                      <el-button :icon="Search" />
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="" prop="queryState">
                  <el-button type="primary" plain>导出</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </template>
        <el-table height="550" header-row-class-name="setHeaderBg" class="w-full" :data="list" :stripe="true"
          :show-overflow-tooltip="true">
          <el-table-column type="selection" width="55" />
          <el-table-column header-align="center" align="center" type="index" label="序号" prop="id" width="80" />
          <el-table-column header-align="center" align="center" label="品类" prop="brandType" width="150" />
          <el-table-column header-align="center" align="center" label="品名/品牌" prop="brand" width="200" />
          <el-table-column header-align="center" align="center" label="规格" prop="specification" width="120" />
          <el-table-column header-align="center" align="center" label="型号" prop="modelType" width="150" />
          <el-table-column header-align="center" align="center" label="供应商" prop="vendor" width="150" />
          <el-table-column header-align="center" align="center" label="成本价(含税)" prop="costPrice" width="150" />
          <el-table-column header-align="center" align="center" label="建议价格(含税)" prop="salePrice" width="150" />
          <el-table-column header-align="center" align="center" label="备注" prop="memo" width="150" />
          <el-table-column header-align="center" align="center" label="最近更新时间" prop="lastUpdateTime" width="120" />
          <el-table-column header-align="center" align="center" label="操作" prop="action" />
        </el-table>
        <!-- 分页组件 -->
        <pagination class="myPagination" layout=" total, prev, pager, next, jumper," v-show="total > 0" :total="total"
          :page="queryParams.pageNo" :limit="queryParams.pageSize" @pagination="getList" />
      </el-card>

      <el-dialog :show-close="true" class="myDialog  !p-0" title="标品档案新增" top="30vh" v-model="dialogVisible" width="60%"
        :before-close="() => { dialogVisible = false }">
        <form-create v-model:api="fApi" :rule="rule" :option="options" />
        <template #footer>
          <span>
            <el-button @click="sureAddProduct">确认</el-button>
            <el-button type="primary" @click="handleCancel">取消</el-button>
          </span>
        </template>
      </el-dialog>

    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.myDialog) {
  .el-dialog__header {
    padding: 20px !important;
    background-color: rgb(190, 190, 190);
    position: relative;

    .el-dialog__headerbtn {
      top: 50%;
      transform: translateY(-50%);

      .el-icon {
        font-size: 24px;
        font-weight: bolder;
        color: #333;
      }
    }
  }

  .el-col {
    padding: 12px 0;
  }

  .el-col-6 {
    max-width: 22.5% !important;
  }

  .el-col-12 {
    max-width: 45% !important;
  }

  .el-col-24 {
    max-width: 90% !important;
  }

  .el-dialog__body {
    padding: 20px 0 20px 0;
  }

  .el-dialog__footer {
    padding-bottom: 20px;
    padding-right: 30px;
  }
}

.el-table {
  :deep(.el-table__row--striped) {
    --el-fill-color-lighter: #eee !important;
  }
}

:deep(.setHeaderBg) {
  th {
    background-color: #eee !important;
  }
}

.myPagination {
  width: 100%;

  &> :deep(.el-pagination__total) {
    flex: 1;
    color: #999;
    font-weight: bold;
  }


}
</style>
